<template>
  <div class="wraper">
    <search-box ref="sBox" @sendValue="saveValue"></search-box>
    <span @click="search">搜索</span>
    <ul>
      <li v-for="item in goodsList" :key="item" @click="sendItem(item)">{{item}}</li>
    </ul>
  </div>
</template>
<script>
import {mapActions,mapMutations} from 'vuex'
import SearchBox from "@/base/searchBox/searchBox";
export default {
  data() {
    return {
      goodsList: [],
       params: {
            q: "电磁炉",
            code: "utf-8",
            area: "c2c",
            nick: "",
            sid: ""
          }
    };
  },
  mounted(){
    this.$nextTick(()=>{
       this.$refs.sBox.focus();
       this.$route.query.inputVal
       if(this.$route.query.inputVal){
         this.params.q=this.$route.query.inputVal
        this.searchGoods();
       }
    })
  },
  methods: {
    // ...mapActions(['setValue']),
    ...mapMutations(['SET_VALUE']),
    searchGoods() {
      this.$axios
        .get(process.env.taobaoUrl, {
          params:this.params
        } 
        )
        .then(res => {
          let myData = res.data.result;
          if (myData.length > 0) {
            let myArr = [];
            myData.forEach(item => {
              myArr.push(item[0]);
            });
            this.goodsList = myArr;
           this.goodsList;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    saveValue(val){
     this.params.q=val
     this.searchGoods()
    },
    search(){
         this.sendItem(this.params.q)
    },
    sendItem(item){
      this.$router.push({
        name:'goodsList',
        // query:{val:item}
      })
      this.SET_VALUE(item)
    }
  },
  components: {
    SearchBox
  }
};
</script>
<style lang="less" scoped>
.wraper {
  position: relative;
  span {
    position: absolute;
    font-size: 0.26rem;
    top: 0.25rem;
    right: 0.25rem;
  }
  ul {
    background: #fff;
    padding-left: 0.3rem;
    li {
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.3rem;
      color: #ccc;
      list-style: none;
    }
  }
}
</style>
